<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            border: 2px solid transparent;
        }

        .active {
            border-color: red !important;
        }
    </style>
</head>

<body>
    <div id="box" class="one two three"></div>
</body>
<script>
    var box = document.getElementById("box");

    // console.log(box.className); //"one two three"
    // box.className = "four";
    // box.className += " three";
    // console.log(box.className.includes("three"));

    // var classList = box.className.split(" ");
    // console.log(classList); //  ['one', 'two', 'three']

    // 新增
    // var addClass = "four"
    // if (!classList.includes(addClass)) {  //没有就新增  有就跳过
    //     classList.push(addClass);
    //     box.className = classList.join(" ");
    // }

    // 删除
    // var delClass = "two";
    // if (classList.includes(delClass)) {  //有就删除  没有就跳过
    //     var index = classList.indexOf(delClass);
    //     classList.splice(index, 1);
    //     box.className = classList.join(" ");
    // }

    // 修改
    // var oldClass = "two";
    // var newClass = "second";
    // if (classList.includes(oldClass)) {  //有就修改  没有就跳过
    //     var index = classList.indexOf(oldClass);
    //     classList.splice(index, 1, newClass);
    //     box.className = classList.join(" ");
    // }

    // 查找
    // var searchClass = "two"
    // classList.includes(searchClass)

    // 好处:
    // 可以 增 删 改 查  多个class名中的一个

    // classList   返回class列表的集合
    // classList的属性和方法
    // 属性:
    // length   class列表的长度(class名的个数)

    // 方法
    // contains(className)   返回匹配的元素中是否存在某个class名
    // add(className)      向匹配的元素中新增一个或多个class名(多个class名用逗号分隔) => 返回值 undefined  (没有就新增 有就跳过)
    // remove(className)   删除匹配的元素中一个或多个class名(多个class名用逗号分隔) => 返回值 undefined   (有就删除 没有就跳过)
    // replace(oldClass,newClass)  将某个class名替换为新的class名 (有就替换 没有就跳过)
    // toggle()   class切换 没有就新增 有就删除

    console.log(box.classList);

    // console.log(box.classList.contains("two")); //true
    // console.log(box.classList.contains("second")); //false

    box.classList.add("four", "five", "six");
    box.classList.remove("four", "five", "six");
    box.classList.replace("two", "second");

    box.onclick = function () {
        this.classList.toggle("active");
    }

    console.log(box);

    // 小结
    // className  获取和修改整个class名(一般适用于单class名)
    // classList  返回class列表的集合 => 可以新增 删除 修改 查找 多class名中的一个




</script>

</html>